<template>
  <div>
    <div class="common-card mt20">
      <dc-cell title="客流量趋势" class="main-title"></dc-cell>
      <div class="common-chart" id="flowColumn"></div>
      <dc-row class="pt40 pb40 mt20 bg-white" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.memberFlow}}</span>
          <span class="label">会员客流量</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.newOldMemberCompare}}</span>
          <span class="label">新老会员人数比</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.memberAvgCustomerMny}}</span>
          <span class="label">会员平均客单价</span>
        </dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20">
      <dc-cell title="消费分布趋势" class="main-title"></dc-cell>
      <div class="common-chart" id="saleline"></div>
      <dc-row class="echarts-list-header" type="flex" justify="space-around">
        <dc-col class="text-left" span="5">消费分布</dc-col>
        <dc-col class="" span="5">销售额</dc-col>
        <dc-col class="" span="5">占比</dc-col>
      </dc-row>
      <dc-row class="echarts-list-data bg-white" type="flex" justify="space-around" v-show="saleInfo.memberSaleTotalRatio > 0">
        <dc-col class="text-left" span="5">
          <span class="point" :style="{background: colors[0]}"></span>
          会员
        </dc-col>
        <dc-col class="" span="5">{{saleInfo.memberSaleTotalMny}}</dc-col>
        <dc-col class="" span="5">{{saleInfo.memberSaleTotalRatio}}%</dc-col>
      </dc-row>
      <dc-row class="echarts-list-data bg-white" type="flex" justify="space-around" v-show="saleInfo.noMemberSaleTotalRatio > 0">
        <dc-col class="text-left" span="5">
          <span class="point" :style="{background: colors[1]}"></span>
          非会员
        </dc-col>
        <dc-col class="" span="5">{{saleInfo.noMemberSaleTotalMny}}</dc-col>
        <dc-col class="" span="5">{{saleInfo.noMemberSaleTotalRatio}}%</dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.newMemberNum}}</span>
          <span class="label">{{curTag[change.type]+'新增会员'}}</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.accuMemberNum}}</span>
          <span class="label">累计会员</span>
        </dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20">
      <dc-cell title="新增会员来源趋势" class="main-title"></dc-cell>
      <div class="common-chart" id="memline"></div>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.newMemberStoreMny}}</span>
          <span class="label">新增会员储值</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.acculMemberStoreMny}}</span>
          <span class="label">累计会员储值</span>
        </dc-col>
      </dc-row>
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.newMemberCredits}}</span>
          <span class="label">新增会员积分</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.acculMemebeCredits}}</span>
          <span class="label">累计会员积分</span>
        </dc-col>
      </dc-row>
    </div>
  </div>
</template>

<script>
  import {initColumn} from '@/common/echarts/column';
  import {initLine} from '@/common/echarts/line';
  import {col, row} from '@/common/Flex';
  import cell from '@/common/plugins/cell';
  import api from '@/common/api/passenger';
  import colors from '@/common/echarts/theme.json';

  export default {
    components: {
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row
    },
    props: {
      change: Object
    },
    data () {
      return {
        curTag: ['', '', '本周', '本月', '今年'],
        flowinfo: {},
        flowLines: {},
        saleLines: {},
        memLines: {},
        memInfo: {},
        saleInfo: {},
        flowColumn: null,
        saleLine: null,
        memLine: null,
        colors: colors.color
      };
    },
    watch: {
      change: {
        handler: function (value) { //深度监听，监听对象的变化
          this.buildChart();
        },
        deep: true
      }
    },
    mounted () {
      this.flowColumn = initColumn('#flowColumn');
      this.saleLine = initLine('#saleline');
      this.memLine = initLine('#memline');
      this.buildChart();
    },
    methods: {
      //重新生成所有图表
      buildChart () {
        let data = {
          timeFlag: this.change.type,
          beginTime: this.change.startTime,
          endTime: this.change.endTime
        };
        this._getFlowTrend(data);
        this._getFlowMember(data);
        this._getFlowSale(data);
      },
      _getFlowTrend (data) {       //获取门店客流分析信息
        this.flowinfo = {};
        this.flowLines = {x: ['0'], y: ['0']};
        this.flowColumn.showLoading();
        api.getFlowTrend(data)
          .then(res => {
            if (res) {
              this.flowinfo = res;
              this.flowLines.x = [];
              this.flowLines.y = [];
              let self = this;
              res.forEach((item) => {
                self.flowLines.x.push(item.timeName);
                self.flowLines.y.push(item.flowNum);
              });
            }
            this.initFlowsColumn();
          }, () => this.initFlowsColumn());
      },
      _getFlowMember (data) {       //获取会员来源趋势
        this.memLines.series = [];
        this.memLines.seriesX = [];
        this.memInfo = {};
        api.getFlowMember(data)
          .then(res => {
            if (res) {
              this.memInfo = res;
              this.memLines.legName = [];
              this.memLines.series = [];
              this.memLines.seriesX = [];
              let self = this;
              res.newMemberOrigInfo.forEach((item, index) => {
                if (item.detail) {
                  self.memLines.seriesX = [];
                  self.memLines.series[index] = {};
                  self.memLines.series[index].name = item.origType;
                  self.memLines.legName.push(item.origType);
                  self.memLines.series[index].type = 'line';
                  self.memLines.series[index].data = [];
                  item.detail.forEach((m) => {
                    self.memLines.series[index].data.push(m.num);
                    self.memLines.seriesX.push(m.dateName);
                  });
                }
              });
            }
            this.initMemdLine();
          }, () => this.initMemdLine());
      },
      _getFlowSale (data) {       //获取消费分布趋势
        this.saleInfo = {};
        this.saleLines.series = [];
        this.saleLines.seriesX = [];
        this.memLine.showLoading();
        api.getFlowSale(data)
          .then(res => {
            if (res) {
              this.saleInfo = res;
              this.saleLines.series = [];
              this.saleLines.seriesX = [];
              let self = this;
              if (res.memberdetail) {
                this.saleLines.series[0] = {};
                this.saleLines.series[0].name = '会员';
                this.saleLines.series[0].type = 'line';
                this.saleLines.series[0].data = [];
                res.memberdetail.forEach((item) => {
                  self.saleLines.seriesX.push(item.dateName);
                  self.saleLines.series[0].data.push(item.saleMny);
                });
              }
              if (res.noMemberdetail) {
                this.saleLines.series[1] = {};
                this.saleLines.series[1].name = '非会员';
                this.saleLines.series[1].type = 'line';
                this.saleLines.series[1].data = [];
                res.noMemberdetail.forEach((item) => {
                  self.saleLines.series[1].data.push(item.saleMny);
                });
              }
            }
            this.initTrendLine();
          }, () => this.initTrendLine());
      },
      //客流量趋势
      initFlowsColumn () {
        this.flowColumn.hideLoading();
        this.flowColumn.setOption({
          xAxis: [
            {
              type: 'category',
              data: this.flowLines.x
            }
          ],
          yAxis: [
            {
              name: '人数',
              type: 'value'
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '60%',
              data: this.flowLines.y
            }
          ]
        });
      },
      //消费分布趋势
      initTrendLine () {
        this.saleLine.hideLoading();
        this.saleLine.setOption({
          legend: {
            data: ['会员', '非会员']
          },
          xAxis: {
            data: this.saleLines.seriesX
          },
          yAxis: [
            {
              type: 'value',
              name: '会员消费'
            }
          ],
          series: this.saleLines.series
        });
      },
      //新增会员来源
      initMemdLine () {
        this.memLine.hideLoading();
        this.memLine.setOption({
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '12%',
            right: '5%',
            //bottom: '20%',
            top: '10%'
          },
          legend: {
            bottom: '1%',
            center: 'center',
            height: '10%',
            data: this.memLines.legName
          },
          xAxis: {
            data: this.memLines.seriesX
          },
          yAxis: [
            {
              type: 'value',
              name: '会员来源'
            }
          ],
          series: this.memLines.series
        }, true);
      }
    }
  };
</script>

<style lang="scss">
</style>
